<template>
  <div class="loginbox">
    <el-row type="flex" justify="center" class="head">
      <div class="font_1">淘物</div>
      <div class="center_font">专注为您提供不一样的二手交易平台</div>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="6">
        <el-image
          style="width: 550px; height: 450px; margin-top: 80px; right: 200px"
          :src="url"
        />
        <!-- <img src="require('../../../assets/登录介绍.png')" alt=""> -->
      </el-col>
      <el-col :span="6" class="deep">
        <div class="login_top_font_1">卖闲置可换钱</div>
        <div class="login_top_font_2">
          去年没人每月平均
          <div class="red">多赚1600+元</div>
        </div>
        <el-form :model="loginForm">
          <el-form-item>
            <el-input
              prefix-icon="el-icon-user-solid"
              placeholder="请输入用户名"
              v-model="loginForm.userCode"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              prefix-icon="el-icon-s-opportunity"
              placeholder="请输入密码"
              show-password
              v-model="loginForm.password"
            >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="login" class="loginbtn" type="primary">
              登录
            </el-button>
          </el-form-item>
        </el-form>
        <a @click="register" class="regist">还没账号？不妨注册一个~~</a>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { loginAPI } from "@/api";

export default {
  data() {
    return {
      loginForm: {
        userCode: "",
        password: "",
        username: "",
      },
      url: require("../../assets/images/登录介绍.png"),
      userList: [],
    };
  },
  methods: {
    register() {
      this.$router.push("/regist");
    },
    async login() {
      const loginRes = await loginAPI(this.loginForm);
      // console.log(loginRes);
      if (loginRes.data.statusCode === 200) {
        if (loginRes.data.data.user.identity == "管理员") {
          this.$notify({
            title: "成功",
            message: loginRes.data.message,
            type: "success",
          });
          sessionStorage.setItem("token", loginRes.data.data.token);
          this.$router.push("/admin_home");
          this.loginForm.username = loginRes.data.data.user.username;
          // let data = {
          //   userame: this.loginForm.username,
          // };
          sessionStorage.setItem("username", this.loginForm.username);
          sessionStorage.setItem("uid", loginRes.data.data.user.uid);
        }

        if (loginRes.data.data.user.identity == "普通用户") {
          this.$notify({
            title: "成功",
            message: loginRes.data.message,
            type: "success",
          });
          sessionStorage.setItem("token", loginRes.data.data.token);
          this.$router.push("/");
          this.loginForm.username = loginRes.data.data.user.username;
          // let data = {
          //   username: this.loginForm.username,
          //   userImg: this.loginForm.userImg
          // };
          sessionStorage.setItem("username", this.loginForm.username);
          sessionStorage.setItem("uid", loginRes.data.data.user.uid);
        }
      }
      if(loginRes.data.statusCode === 405){
        this.$notify({
          title: '警告',
          message: '用户名不存在哦，这边建议您先注册~',
          type: 'warning'
        });
      }
      if(loginRes.data.statusCode === 407){
        this.$notify({
          title: '警告',
          message: '用户名和密码不能为空！',
          type: 'warning'
        });
      }
      if(loginRes.data.statusCode === 401){
        this.$notify.error({
          title: '错误',
          message: '密码输入有误'
        });
      }
    },
  },
};
</script>

<style scoped>
.regist {
  margin-left: 210px;
}
.deep /deep/ .login_top_font_1 {
  font-weight: 900;
  font-size: 30px;
  margin-top: 100px;
  padding: 10px;
}
.deep /deep/ .login_top_font_2 {
  padding: 10px;
  font-weight: 600;
  font-size: 15px;
  width: 500px;
}
.red {
  color: red;
  font-weight: 600;
  font-size: 15px;
}
.head /deep/ .font_1 {
  height: 80px;
  width: 100px;
  margin-right: 500px;
  text-align: center;
  line-height: 80px;
  font-weight: 900;
  font-size: 30px;
}
.head /deep/ .center_font {
  line-height: 80px;
  font-weight: 900;
  margin-right: 200px;
  font-size: 20px;
}
.loginbox {
  width: 100%;
  height: 100vh;
  background-color: #ffe60f;
}
.loginbox /deep/ .head {
  width: 100%;
  height: 80px;
  background-color: #fed802;
}
.loginbox h2 {
  text-align: center;
  margin-top: 12rem;
  margin-bottom: 2rem;
  font-weight: bolder;
  font-size: 1.6rem;
  color: #fff;
}

.loginbtn {
  width: 100%;
}
</style>
